使用Vue3和Vuelidate进行表单和表单验证

您所在的位置：网站首页 › js form表单校验 › 使用Vue3和Vuelidate进行表单和表单验证

使用Vue3和Vuelidate进行表单和表单验证

#使用Vue3和Vuelidate进行表单和表单验证| 来源: 网络整理| 查看: 265

请参阅我即将出版的关于 Ionic 和 Vue JS 的书

所以上周我做了一个关于使用Vee-Validate和Vue3和Ionic Framework new Vue Components的短视频。

有人问我为什么不使用 Vuelidate?除了我上次需要表单验证之外没有其他具体原因,我使用了Vee-Validate。

所以我在这里所做的是从之前的表单/表单验证帖子中复制相同的示例,但这次使用Vuelidate。

代码在帖子末尾提供,请查看我在 Vue3 和 Ionic Framework](https://www.youtube.com/playlist?list=PL2PY2-9rsgl2uKW0DB5FJ-YRCAG-JuSWN)上的[视频

设置

我们假设你已经有一个 vue3 项目。

安装库

npm install @vuelidate/[email protected] npm install @vuelidate/[email protected]

进入全屏模式退出全屏模式

由于我使用的是打字稿,因此我需要在shims-vue.d.ts中进行此更改

declare module '@vuelidate/core'; declare module '@vuelidate/validators';

进入全屏模式退出全屏模式

设置我的表单域

首先在我的组件的脚本区,导入库

import { useVuelidate } from "@vuelidate/core"; import { required, email } from "@vuelidate/validators";

进入全屏模式退出全屏模式

在设置函数中,让我们定义表单字段。

// set fields and some initial values const fform = reactive({ title: "", body: "", emailAddress: "", gender: "MALE", save: true, });

进入全屏模式退出全屏模式

接下来,我们将使用我们导入的 vuelidate 中的规则将规则映射到字段。

const rules = { title: { required }, body: { required }, emailAddress: { required, email }, gender: {}, save: {}, };

进入全屏模式退出全屏模式

我们使用useVuelidate挂钩将所有这些绑定到 Vuelidate 对象。我本来可以使用ref来避免所有这些,但我喜欢使用表单对象而不是一堆字段。

参考和反应:

ref() 接受一个原始值并返回一个反应性和可变的 ref 对象 reactive() 接受一个对象并返回原始的响应式代理 const vv = useVuelidate(rules, { title: toRef(fform, "title"), body: toRef(fform, "body"), emailAddress: toRef(fform, "emailAddress"), gender: toRef(fform, "gender"), save: toRef(fform, "save"), });

进入全屏模式退出全屏模式

当用户提交表单时,我们需要有一个函数来处理。在这种情况下,我们首先使用vv.value.$touch()触发表单验证;如果有错误,我们退出并且不提交表单。

// handle the submit of the form, only called // if the form is valid const onSubmit = () => { vv.value.$touch(); if (vv.value.$invalid) return; alert("Form Submitted " + JSON.stringify(fform, null, 2)); };

进入全屏模式退出全屏模式

由于我们使用的是setup方法,因此我们需要返回适当的函数和属性,以便可以在模板中访问它们。

return { router: useRouter(), onSubmit, vv, };

进入全屏模式退出全屏模式

设置我的表单模板

在我的表单中,我有一些字段,并且由于我使用的是 Ionic 组件,最初我担心我必须做一些额外的工作,但我不必这样做。

我们可以使用从useVuelidate调用返回的vv对象访问与我们创建的字段关联的model;我们以我们的形式使用这些模型

Title

进入全屏模式退出全屏模式

表格初始值

很棒的是,因为我们正在使用 vue 绑定,所以我们为表单字段设置的初始值通过模型传递给设置输入元素

Gender MALE FEMALE

进入全屏模式退出全屏模式

[ Alt ](https://res.cloudinary.com/practicaldev/image/fetch/s--awHAvILf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/imvm0dqcacy5fn7kfi2y.png)